var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
(function (factory) {
    if (typeof module === "object" && typeof module.exports === "object") {
        var v = factory(require, exports);
        if (v !== undefined) module.exports = v;
    }
    else if (typeof define === "function" && define.amd) {
        define(["require", "exports", "maishu-jueying", "./component", "react", "components/common/base-component", "maishu-services-sdk", "maishu-ui-toolkit", "controls/image-manager"], factory);
    }
})(function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    const maishu_jueying_1 = require("maishu-jueying");
    const component_1 = require("./component");
    const React = require("react");
    const base_component_1 = require("components/common/base-component");
    const maishu_services_sdk_1 = require("maishu-services-sdk");
    const ui = require("maishu-ui-toolkit");
    const image_manager_1 = require("controls/image-manager");
    //========================================
    // 列表项的宽度，这 css 样式设定，要与它相同
    const itemHeight = 120;
    //========================================
    class ItemsEditor extends maishu_jueying_1.PropEditor {
        constructor(props) {
            super(props);
            this.imageService = base_component_1.createService(maishu_services_sdk_1.ImageService);
        }
        showImageDialog() {
            return __awaiter(this, void 0, void 0, function* () {
                image_manager_1.default.show((imageIds) => {
                    imageIds.forEach(o => {
                        let items = this.props.value || [];
                        items.push({ image: o, url: '', title: '' });
                        this.props.updateComponentProp(items);
                    });
                });
            });
        }
        render() {
            let props = Object.assign({}, component_1.Carousel.defaultProps, this.props.editComponents[0].props);
            let { itemScale, clickType, items } = props;
            let itemWidth;
            if (itemScale) {
                itemWidth = itemHeight / itemScale;
            }
            return React.createElement("div", { className: "carousel-editor" },
                React.createElement("ul", { key: "ul", className: "carousel-items" },
                    items.map((o, i) => React.createElement("li", { key: i, style: { width: itemWidth } },
                        React.createElement("div", { className: "form-group" },
                            React.createElement("img", { key: o.image, src: this.imageService.imageSource(o.image, 100) })),
                        clickType == 'openPage' ?
                            React.createElement("div", { className: "form-group" },
                                React.createElement("input", { className: "form-control", placeholder: "\u8BF7\u8F93\u5165\u548C\u56FE\u7247\u5BF9\u5E94\u7684\u94FE\u63A5" })) : null,
                        React.createElement("div", { className: "form-group" },
                            React.createElement("button", { className: "btn btn-block btn-danger", ref: (e) => {
                                    if (!e)
                                        return;
                                    ui.buttonOnClick(e, () => {
                                        items = items.filter(c => c != o);
                                        // this.state.items = items;
                                        // this.setState(this.state);
                                        this.props.updateComponentProp(items);
                                        return Promise.resolve();
                                    }, { confirm: '确定删除吗' });
                                } }, "\u5220\u9664")))),
                    React.createElement("li", { style: { width: itemWidth, color: 'unset' }, className: "btn-link", onClick: () => this.showImageDialog() },
                        React.createElement("i", { className: "icon-plus icon-4x" }),
                        React.createElement("div", null, "\u4ECE\u76F8\u518C\u9009\u53D6\u56FE\u7247"))),
                React.createElement("div", { key: "div", className: "clearfix" }));
        }
    }
    exports.ItemsEditor = ItemsEditor;
});
